/**
 * User: Célia Calçada
 * Date: 10-08-2013
 * Driver navigation view
 */

Ext.define('Mobile-app.view.Driver', {
    extend: 'Ext.navigation.View',
    alias: 'widget.driverpanel',

    config: {
        title: $.t('main.driver_plural'),
        iconCls: 'user',
        navigationBar: false,

        items: [
            {
                id: 'driverList',
                fullscreen: true,
                xtype: 'list',
                style: 'font-size:65%',

                itemTpl: new Ext.XTemplate('<table border=0>',
                    '<tr>',
                    '<td width=80 align="center">{state:this.stateIcon}</td>',
                    '<td>',
                        '<b>', $.t('main.name'), '</b>:</b> {name}<br>',
                        '<b>', $.t('main.cardNumber'), ':</b> {cardNumber}<br>',
                        '<b>', $.t('main.vehicle'), ':</b> ',
                            '<tpl if="vehicle == -1 || mobileReference == \'\'">',
                                'n.a.',
                            '<tpl else>',
                                '{mobileReference}',
                            '</tpl>',
                        '<br><b>', $.t('main.driving'),':</b> {drivingTimeCurrentJourney:this.formatTime} (',
                            '<tpl if="drivingLeft &lt; 0">',
                                $.t('main.exceeded in'),' <span style="color: #e6462e;">',
                            '<tpl else>',
                                $.t('main.available'),' <span style="color: #39c164;">',
                            '</tpl>',
                        ' {drivingLeft:this.formatTime}</span>)',
                    '</td>',
                    '</tr>',
                    '<tr>',
                    '</table>',
                    {
                        /***
                         * Will set the driver state icon
                         * @param state
                         * @returns {string}
                         */
                        stateIcon: function (state) {

                            var css = null; //will contain the css class of the state

                            switch (Number(state)) {
                                case 0:
                                    css = 'driver-bar-sleep';
                                    break;
                                case 1:
                                    css = 'driver-bar-square';
                                    break;
                                case 2:
                                    css = 'driver-bar-working';
                                    break;
                                case 3:
                                    css = 'driver-bar-wheel';
                                    break;
                            }
                            //if no state, dont show nothing
                            if (!css)
                                return;
                            //return the state image
                            return '<div class="' + css + '" style="width:18px; height:16px; border:0px; padding:0px; margin:0px;">&nbsp;</div>';
                        },
                        /***
                         * Will format a time into H:i:s format
                         * @param diff
                         * @returns {string}
                         */
                        formatTime: function(diff){

                            diff = Math.abs(diff);

                            //add some local vars
                            var inDays = true, hideSeconds = true, days = 0, hours = 0, minutes = 0, seconds = 0, rest = 0, rest1 = 0, rest2 = 0;
                            //calculate the number of days
                            if(diff % 86400 <= 0) { days = diff / 86400; }
                            //calculate hours, minutes and seconds
                            if(diff % 86400 > 0) {
                                rest = (diff % 86400);
                                days = (diff - rest) / 86400;
                                if( rest % 3600 > 0 ) {
                                    rest1 = (rest % 3600);
                                    hours = (rest - rest1) / 3600;
                                    if( rest1 % 60 > 0 ) {
                                        rest2 = (rest1 % 60);
                                        minutes = (rest1 - rest2) / 60;
                                        seconds = rest2;
                                    } else {
                                        minutes = rest1 / 60;
                                    }
                                } else {
                                    hours = rest / 3600;
                                }
                            }
                            //add days as hours (if flag is active)
                            if(days>0 && !inDays) hours += days*24;
                            //force to chars in minutes and seconds
                            if(minutes < 10){ minutes = "0"+minutes; }
                            if(seconds < 10){ seconds = "0"+seconds; }
                            //return formatted time
                            if(!hideSeconds) return hours+":"+minutes+":"+seconds;
                            else return hours+":"+minutes;
                        }
                    }
                ),
                store: Ext.create('Ext.data.Store', {
                    model: 'Mobile-app.model.Driver',
                    sorters: [
                        {
                            property: "drivingLeft",
                            direction: "ASC"
                        },
                        {
                            property: "name",
                            direction: "ASC"
                        }
                    ]
                }),
                items: [
                    {
                        xtype: 'toolbar',
                        docked: 'top',

                        items: [
                            { xtype: 'spacer' },
                            {
                                itemId: 'search',
                                xtype: 'searchfield',
                                placeHolder: $.t('main.search') + '...'
                            },
                            { xtype: 'spacer' }
                        ]
                    }
                ]
            }
        ],
        listeners: [
            {
                event: 'painted',
                fn: 'loadStore'
            },
            {
                delegate: '#driverList',
                event: 'itemtap',
                fn: 'showDetails'
            },
            {
                delegate: '#search',
                event: 'keyup',
                fn: 'filterList'
            },
            {
                delegate: '#search',
                event: 'clearicontap',
                fn: 'clearFilter'
            }
        ]
    },

    /***
     * Will load the trailer list
     */
    loadStore: function () {
        this.fireEvent('loadStore', this.down('list'));
    },

    /***
     * Called whenever an item of this list is tapped
     * @param list Ext.DataView.List
     * @param index The index of the item tappe
     * @param target The element or DataItem tapped
     * @param record The record associated to the item
     * @param e The event object
     * @param eOpts The options object passed to Ext.util.Observable.addListener
     */
    showDetails: function (list, index, target, record, e, eOpts) {
        this.fireEvent('showDetails', list, record);
    },

    /***
     * The search field
     * @param field
     */
    filterList: function (field) {
        this.fireEvent('filterList', this, this.down('list'), field);
    },

    /***
     * Will clear the filter on the list
     */
    clearFilter: function () {
        this.fireEvent('clearFilter', this.down('list'));

    }
});